<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加物品</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <h1>添加新的物品</h1>
    </header>
    <nav>
        <ul>
            <li><a href="index.html">主页</a></li>
            <li><a href="warehouse.html">查看仓库</a></li>
            <li><a href="add-warehouse.html">添加仓库</a></li>
            <li><a href="add-item.html">添加物品</a></li>
            <li><a href="history.html">历史订单</a></li>
        </ul>
    </nav>
    <main>
        <h2>填写物品信息</h2>
        <form id="addItemFrom">
            <div class="form-group">
                <label for="itemName">物品名称:</label>
                <input type="text" id="itemName" name="itemName" required>
            </div>
            <div class="form-group">
                <label for="unitOfMeasure">计量单位:</label>
                <input type="text" id="unitOfMeasure" name="unitOfMeasure" required>
            </div>
            <div class="form-group">
                <label for="warehouseId">仓库ID:</label>
                <input type="number" id="warehouseId" name="warehouseId" required>
            </div>
            <div class="form-group">
                <label for="quantity">数量:</label>
                <input type="number" id="quantity" name="quantity" required>
            </div>
            <div class="form-group">
                <label for="plannedUnitPrice">预估单价:</label>
                <input type="number" step="0.01" id="plannedUnitPrice" name="plannedUnitPrice" required>
            </div>
            <button type="submit" id="btn">提交</button>
        </form>
    </main>
    <footer>
        <p>&copy; SuperXiaoMa 仓库管理系统. 版权所有.</p>
    </footer>
    <!-- 引入 jquery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        var btn = document.querySelector("#btn");
        btn.onclick = function () {
            let formData = {
                itemName: document.getElementById("itemName").value,
                unitOfMeasure: document.getElementById("unitOfMeasure").value,
                warehouseId: document.getElementById("warehouseId").value,
                quantity: document.getElementById("quantity").value,
                plannedUnitPrice: document.getElementById("plannedUnitPrice").value
            };
            $.ajax({
                url: "api/add-item",
                type: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                data: JSON.stringify(formData),
                success: function (result) {
                    alert("添加物品成功")
                }
            })
        }
    </script>
</body>

</html>